<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                label-width="100px"
                class="mt-4"
            >
                <el-form-item label="公司名称" prop="name">
                    <el-input v-model="formData.company_name" placeholder="请输入公司名称" clearable />
                </el-form-item>
                <el-form-item label="公司标识" prop="identifier">
                    <el-input v-model="formData.company_id" placeholder="请输入公司标识" clearable />
                </el-form-item>
                <el-form-item label="所在城市" prop="city_id">
                    <el-select class="w-full" v-model="formData.city_id" placeholder="请选择城市" clearable>
                        <el-option
                            v-for="item in cityOptions"
                            :key="item.id"
                            :label="item.name + ' (Id:' +item.id +',行政编码：'+ item.area_code + ')'"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="起点距离" required>
                    <el-row :gutter="10">
                        <el-col :span="11">
                            <el-form-item prop="min_distance_departure">
                                <el-input-number
                                    v-model="formData.min_distance_departure"
                                    :min="0"
                                    placeholder="最小距离"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" class="text-center">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="max_distance_departure">
                                <el-input-number
                                    v-model="formData.max_distance_departure"
                                    :min="0"
                                    placeholder="最大距离"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="终点距离" required>
                    <el-row :gutter="10">
                        <el-col :span="11">
                            <el-form-item prop="min_distance_destination">
                                <el-input-number
                                    v-model="formData.min_distance_destination"
                                    :min="0"
                                    placeholder="最小距离"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" class="text-center">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="max_distance_destination">
                                <el-input-number
                                    v-model="formData.max_distance_destination"
                                    :min="0"
                                    placeholder="最大距离"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="关键词" prop="keywords">
                    <el-input
                        v-model="formData.keyword"
                        type="textarea"
                        placeholder="请输入关键词，多个关键词用逗号分隔"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="定位上传" prop="position_upload">
                    <el-radio-group v-model="formData.position_upload">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import { cityLists,getAllCities } from '@/api/supervise/city'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value === 'add' ? '新增公司' : '编辑公司'
})

const cityOptions = ref([])

const formData = reactive({
    id: '',
    company_name: '',
    company_id: '',
    city_id: '', // 修改 code 为 city_id
    min_distance_departure: 500,
    max_distance_departure: 2500,
    min_distance_destination: 1000,
    max_distance_destination: 3000,
    keyword: '便利店,超市,公交站,学校,咖啡店,火锅店,商超,服装店,五金店,建材店,快餐店,冷饮店,手机店,沙县小吃,加油站,理发店,药店,面包店,酒店,火锅店',
    status: 1,
    position_upload: 1
})

const formRules = {
    company_name: [{ required: true, message: '请输入公司名称' }],
    company_id: [{ required: true, message: '请输入公司标识' }],
    city_id: [{ required: true, message: '请选择所在城市' }],
    min_distance_departure: [{ required: true, message: '请输入起点最小距离' }],
    max_distance_departure: [{ required: true, message: '请输入起点最大距离' }],
    min_distance_destination: [{ required: true, message: '请输入终点最小距离' }],
    max_distance_destination: [{ required: true, message: '请输入终点最大距离' }]
}

// 获取城市列表
const getCityOptions = async () => {
    try {
        const res = await getAllCities()
        cityOptions.value = res || []
    } catch (error) {
        console.error('获取城市列表失败:', error)
    }
}

const open = async (type = 'add') => {
    mode.value = type
    await getCityOptions() // 打开弹窗时获取城市列表
    popupRef.value?.open()
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData }
    // 这里需要调用实际的API
    // if (mode.value === 'add') {
    //     await createCompany(data)
    // } else {
    //     await updateCompany(data)
    // }
    feedback.msgSuccess(mode.value === 'add' ? '新增成功' : '编辑成功')
    emit('success')
    handleClose()
}

const handleClose = () => {
    emit('close')
}

const getDetail = async (data: Record<string, any>) => {
    Object.assign(formData, data)
}

defineExpose({
    open,
    getDetail
})
</script>